import {PlusOutlined, UploadOutlined} from '@ant-design/icons';
import {Button, message, Drawer, FormInstance, Popconfirm, Image, Upload} from 'antd';
import React, {useState, useRef, useEffect} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import type {ProColumns, ActionType} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {ModalForm, ProFormItem, ProFormText, ProFormTextArea} from '@ant-design/pro-form';
import ProDescriptions, {ProDescriptionsItemProps} from '@ant-design/pro-descriptions';
import {removeData, dataList, addData, updateData, loadData} from './service';
import type {WorkingUnitBody, WorkingUnitListItem, WorkingUnitListPagination} from './data';
import CheckModule from '@/components/CheckModule';
import {IDomEditor, IEditorConfig, IToolbarConfig} from "@wangeditor/editor";
import {upload} from "@/services/ant-design-pro/api";
import {Editor, Toolbar} from "@wangeditor/editor-for-react";
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

/**
 * 添加节点
 *
 * @param fields
 * @param mode
 */

const handleAdd = async (fields: WorkingUnitBody, mode: boolean) => {
  const hide = message.loading(mode ? '正在保存' : '正在添加');

  try {
    mode ? await updateData({...fields}) : await addData({...fields});
    hide();
    message.success(mode ? '保存成功' : '添加成功');
    return true;
  } catch (error) {
    // hide();
    // message.error(mode ? '保存失败请重试' : '添加失败请重试');
    return false;
  }
};
/**
 * 删除节点
 *
 * @param selectedRows
 */

const handleRemove = async (selectedRows: WorkingUnitListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeData(selectedRows.map((row) => row.workingId));
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const WorkingUnitPage: React.FC = () => {
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const formRef = useRef<FormInstance>();
  const [currentRow, setCurrentRow] = useState<WorkingUnitListItem>();
  const [selectedRowsState, setSelectedRows] = useState<WorkingUnitListItem[]>([]);

  const columns: ProColumns<WorkingUnitListItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      render: (dom, entity, index) => {
        return (
          <span>
            {index +
              1 +
              ((actionRef?.current?.pageInfo?.current || 1) - 1) *
              (actionRef?.current?.pageInfo?.pageSize || 5)}
          </span>
        );
      },
    },
    {
      title: '作业单元名称',
      dataIndex: 'name',
    },
    {
      title: '内容',
      search: false,
      dataIndex: 'content',
      ellipsis: true,
      // hideInTable:true,
      // valueType: "code",
      // render: (_, record) => <span style={{whiteSpace: 'pre-wrap'}}>{record?.content}</span>,
      // render: (_, record) => <div dangerouslySetInnerHTML={{__html: record?.content}}></div>,

    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      search: false,
      sorter: true,
      defaultSortOrder: 'descend',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInDescriptions: true,
      render: (_, record) => [
        <a
          key="view"
          onClick={() => {
            setCurrentRow(record);
            setShowDetail(true);
          }}
        >
          查看
        </a>,
        <a
          key="edit"
          onClick={() => {
            formRef.current?.resetFields();
            console.log(record);
            setCurrentRow(record);
            setEditMode(true);
            handleModalVisible(true);
          }}
        >
          编辑
        </a>,

        <Popconfirm
          key="delete"
          okButtonProps={{danger: true}}
          title={`确认删除作业活动：${record.name}?`}
          onConfirm={async () => {
            setCurrentRow(record);
            await handleRemove([record]);
            actionRef.current?.reloadAndRest?.();
          }}
          okText="删除"
          cancelText="取消"
        >
          <a href="#"> 删除 </a>
        </Popconfirm>,
      ],
    },
  ];

  const [editMode, setEditMode] = useState<boolean>(false);
  const [previewData, setPreviewData] = useState({
    visible: false,
    image: '',
    title: '',
  });


  // // editor 实例
  // const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // // 编辑器内容
  // const [html, setHtml] = useState("");
  // // 工具栏配置
  // const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // // 编辑器配置
  // const editorConfig: Partial<IEditorConfig> = {
  //   // TS 语法
  //   placeholder: '请输入内容...',
  //   MENU_CONF: {
  //     uploadImage: {
  //       // 自定义上传
  //       customUpload: async function (file: File, insertFn: any) {
  //         // TS 语法
  //         console.log(file);
  //         upload(file).then((value) => {
  //           console.log(value);
  //           // @ts-ignore
  //           insertFn(value.data.url, value.data.alt, value.data.href);
  //         });
  //
  //         // async customUpload(file, insertFn) {                   // JS 语法
  //         // file 即选中的文件
  //         // 自己实现上传，并得到图片 url alt href
  //         // 最后插入图片
  //       },
  //       // withCredentials: true,
  //       // server: 'http://localhost:8080/enterprise/editor/upload',
  //       // fieldName: 'file',
  //       // header: {
  //       //   Authorization: `Bearer ${localStorage.getItem('token')}`
  //       // }
  //     },
  //   },
  // };
  // // 及时销毁 editor ，重要！
  // useEffect(() => {
  //   return () => {
  //     if (editor == null) return;
  //     editor.destroy();
  //     setEditor(null);
  //   };
  // }, [editor]);
  const isDev = process.env.NODE_ENV === 'development';

  const [uploading, setUploading] = useState(false);
  const uploadProps = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
      TenantCode: 'e513f45c099239505054fead0a445fa2'
    },
    multiple: false,
    // onPreview: async (file: UploadFile) => {
    //   window.open(file?.response?.data?.path || file.url, '_blank')
    // },
    name: 'file',
    max: 1,
  };

  return (
    <CheckModule code={'SC'}>
      <PageContainer waterMarkProps={{content: ''}}>
        <ProTable<WorkingUnitListItem, WorkingUnitListPagination>
          headerTitle="作业活动列表"
          actionRef={actionRef}
          rowKey="workingId"
          search={{
            labelWidth: 120,
          }}
          toolBarRender={() => [
            <Button
              type="link"
              key="template"
              onClick={async () => {
                location.href = "https://cdn.51zasafe.com/zun/template/%E4%BD%9C%E4%B8%9A%E6%B4%BB%E5%8A%A8%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
              }}
            >
              下载模板
            </Button>,
            <Upload
              key="upload"
              {...uploadProps}
              accept={'.xls,.xlsx'}
              action={'/v2/enterprise/working-unit/import'}
              showUploadList={false}
              onChange={async (data) => {
                let file = data.file;
                if (file.status === 'uploading') {
                  setUploading(true);
                } else {
                  setUploading(false);
                }
                if (file.status === 'done' && file.response.code !== 200) {
                  message.error(file.response.msg);
                  file.status = 'error';
                } else if (file.status === 'done' && file.response.code === 200) {
                  message.success('上传成功');
                  // @ts-ignore
                  actionRef?.current?.reloadAndRest();
                }
              }}
            >
              <Button type="primary" loading={uploading} icon={<UploadOutlined/>}>
                导入
              </Button>
            </Upload>,
            <Button
              type="primary"
              key="primary"
              onClick={() => {
                setEditMode(false);
                handleModalVisible(true);
              }}
            >
              <PlusOutlined/> 新建
            </Button>,
          ]}
          request={dataList}
          columns={columns}
          rowSelection={{
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows);
            },
          }}
        />
        {selectedRowsState?.length > 0 && (
          <FooterToolbar
            extra={
              <div>
                已选择{' '}
                <a
                  style={{
                    fontWeight: 600,
                  }}
                >
                  {selectedRowsState.length}
                </a>{' '}
                个作业活动
              </div>
            }
          >
            <Popconfirm
              key="delete"
              title={`确认删除选中的${selectedRowsState.length}个作业活动?`}
              okButtonProps={{danger: true}}
              onConfirm={async () => {
                await handleRemove(selectedRowsState);
                setSelectedRows([]);
                actionRef.current?.reloadAndRest?.();
              }}
              okText="删除"
              cancelText="取消"
            >
              <Button danger>批量删除</Button>
            </Popconfirm>
            {/*<Button type="primary">批量审批</Button>*/}
          </FooterToolbar>
        )}
        <ModalForm<WorkingUnitBody>
          title={currentRow?.workingId || 0 > 0 ? '编辑作业活动' : '新建作业活动'}
          formRef={formRef}
          modalProps={{destroyOnClose: true, maskClosable: false}}
          visible={createModalVisible}
          onVisibleChange={(visible) => {
            if (!visible) {
              setCurrentRow(undefined);
            }
            handleModalVisible(visible);
          }}
          onFinish={async (value) => {
            const success = await handleAdd(value, editMode);
            if (success) {
              handleModalVisible(false);
              if (actionRef.current) {
                actionRef.current?.reload();
              }
            }
          }}
          // @ts-ignore
          request={(params: WorkingUnitBody) => {
            console.log(params);
            if (params.workingId > 0) {
              return loadData(params).then(({data}) => {
                setHtml(data.content)
                return data;
              });
            } else {
              return new Promise<WorkingUnitBody>((resolve) => {
                // @ts-ignore
                resolve({
                  workingId: 0,
                  createTime: '',
                });
              });
            }
          }}
          params={{...currentRow}}
        >
          <ProFormText hidden name="workingId"/>
          <ProFormText required label={'名称'} name="name"/>
          <ProFormTextArea required label={'内容'} name="content"/>
          {/*<ProFormItem required label={'内容'} name="content" rules={[*/}
          {/*  {*/}
          {/*    required: true,*/}
          {/*    message: '内容为必填项',*/}
          {/*  },*/}
          {/*]}>*/}
          {/*  <div style={{border: '1px solid #ccc', zIndex: 100}}>*/}
          {/*    <Toolbar*/}
          {/*      editor={editor}*/}
          {/*      defaultConfig={toolbarConfig}*/}
          {/*      mode="simple"*/}
          {/*      style={{borderBottom: '1px solid #ccc'}}*/}
          {/*    />*/}
          {/*    <Editor*/}
          {/*      defaultConfig={editorConfig}*/}
          {/*      value={html}*/}
          {/*      onCreated={setEditor}*/}
          {/*      onChange={(editor) => {*/}
          {/*        if (!editor.isEmpty()) {*/}
          {/*          let html1 = editor.getHtml();*/}
          {/*          setHtml(html1);*/}
          {/*          if (html1 == '') {*/}
          {/*          }*/}
          {/*          formRef.current?.setFieldsValue({content: html1});*/}
          {/*        }*/}

          {/*      }}*/}
          {/*      mode="default"*/}
          {/*      style={{height: '200px', overflowY: 'hidden'}}*/}
          {/*    />*/}
          {/*  </div>*/}
          {/*  {isDev ? (<div style={{marginTop: '15px'}}>{html}</div>) : (<></>)}*/}
          {/*</ProFormItem>*/}

        </ModalForm>

        <Image
          width={200}
          style={{display: 'none'}}
          src={previewData.image}
          preview={{
            visible: previewData.visible,
            src: previewData.image,
            onVisibleChange: (value) => {
              setPreviewData({image: previewData.image, title: '', visible: value});
            },
          }}
        />
        <Drawer
          width={800}
          visible={showDetail}
          onClose={() => {
            setCurrentRow(undefined);
            setShowDetail(false);
          }}
          closable={false}
        >
          {currentRow?.workingId && (
            <ProDescriptions<WorkingUnitBody>
              column={1}
              bordered={true}
              title={'作业活动详情'}
              // @ts-ignore
              request={loadData}
              params={currentRow}
              columns={columns as ProDescriptionsItemProps<WorkingUnitBody>[]}
            />
          )}
        </Drawer>
      </PageContainer>
    </CheckModule>
  );
};

export default WorkingUnitPage;
